<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字文化服务平台</title>
    <script src="vue.js" lang="javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        /* 样式部分仅作参考，需进一步完善 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }


        .nav {
            /* 菜单样式 */
            background-color: #333;
            color: white;
            list-style: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: -webkit-sticky;
            position: sticky;
            top: 0;

        }

        .nav li {
            float: left;
        }

        .nav li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .sidebar {
            /* 左侧菜单样式 */
            width: 20%;
            float: left;
            background-color: #f1f1f1;
            padding: 10px;


        }

        .content {
            /* 主内容区域样式 */
            width: 80%;
            float: left;
            padding: 10px;
        }

        /* 其他样式... */
        /* 响应式设计 */
        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        /* CSS 样式 */
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px 0px;
            width: 100%;
        }

        .sidebar {
            width: 20%;
            /* 默认宽度 */
            /* min-width: 200px; */
            /* 最小宽度 */


            background-color: #666;
            /* 背景色 */


        }

        /* 侧边栏内导航的样式 */
        .sidebar nav {
            padding-top: 20px;
            /* 顶部内边距，可根据需要调整 */

        }

        /* 菜单列表样式 */
        .sidebar-menu {
            list-style-type: none;
            /* 移除默认的列表样式 */
            padding: 0;
            /* 移除默认的内边距 */
            margin: 0;
            /* 移除默认的外边距 */
        }

        /* 菜单项样式 */
        .sidebar-menu li a {
            display: block;
            /* 使链接占据整个列表项空间 */
            color: #fff;
            /* 文本颜色 */
            text-decoration: none;
            /* 移除下划线 */
            padding: 10px 20px;
            /* 内边距 */
            border-bottom: 1px solid #444;
            /* 底部边框，增强分隔感 */
            transition: background-color 0.3s ease;
            /* 添加过渡效果 */
        }

        /* 菜单项被选中或点击时的样式 */
        .sidebar-menu li a:hover,
        .sidebar-menu li a.active {
            background-color: #999;
            /* 选中或点击时的背景色 */
        }

        .content {
            width: 70%;
            /* 默认宽度 */
            flex: 1 1 auto;
            /* 伸缩 */
            order: 2;
            /* 在内容之后 */
        }

        /* 当屏幕宽度小于 768px 时，堆叠侧边栏和内容区域 */
        @media (max-width: 768px) {

            .sidebar,
            .content {
                width: 100%;
                order: initial;
            }

            .sidebar {
                margin-bottom: 20px;
                /* 添加一些间距 */
            }
        }

        /* 基本样式 */
        .portfolio-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .portfolio-item {
            width: calc(33% - 20px);
            /* 减去外边距 */
            margin: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .portfolio-image {
            width: 100%;
            height: 180px;
            display: block;
        }

        .portfolio-details {
            padding: 10px;
            text-align: center;
        }

        .portfolio-name {
            font-weight: bold;

        }

        .portfolio-id {
            font-size: 14px;
            color: #666;
            line-height: 2em;
        }

        .portfolio-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .consult-button {
            display: inline-block;
            padding: 5px 10px;
            background-color: #007BFF;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            #app {
                width: 100%;
            }

            .portfolio-item {
                width: calc(50% - 20px);
            }
        }

        @media (max-width: 500px) {
            #app {
                width: 100%;
            }

            .portfolio-item {
                width: calc(100% - 20px);
            }
        }

        .like-button {
            display: inline-block;

            /* 适当调整间距 */
        }

        .like-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f0f0;
            /* 默认背景色 */
            border: none;
            border-radius: 4px;
            /* padding: 10px 15px; */
            cursor: pointer;
            transition: background-color 0.2s ease;
            /* 动画效果 */
        }

        .like-btn:hover {
            background-color: #ddd;
            /* 悬停时背景色 */
        }

        .like-btn.active {
            background-color: #ff0000;
            /* 点赞后背景色 */
            color: #fff;
            /* 点赞后文本颜色（如果有文本） */
        }

        .icon {
            font-size: 20px;
            /* 图标大小 */
            margin-right: 5px;
            /* 图标与计数器之间的间距 */
        }

        .count {
            font-size: 16px;
            /* 计数器字体大小 */
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="banner">
            <!-- Banner内部的内容，如标题、文本、按钮等 -->
            <!-- <h1>{{title}}</h1> -->
            <img src="images/banner.jpg" width="100%">
        </div>

        <ul class="nav">
            <li v-for="(item,index) in menus" @click="changemenu(index)"><a href="#">{{item.name}}</a></li>
        </ul>
        <div class="container">
            <div class="sidebar">
                <ul class="sidebar-menu">
                    <li v-for="item,index in submenu"><a href="#">{{item.name}}</a></li>
                </ul>
                <!-- 更多左侧菜单项... -->
            </div>

            <div class="content">
                <h2>数字创意作品集（文创）</h2>
                <div class="portfolio-container">
                    <!-- 第一个作品集的作品 -->
                    <!-- 重复以下结构9次 -->
                    <div class="portfolio-item" v-for="(item,index) in culturalIndustries" v-if="index<=8">
                        <img class="portfolio-image" :src="item.imgsrc" alt="作品1">
                        <div class="portfolio-details">
                            <p class="portfolio-name">{{item.name}}</p>
                            <p class="portfolio-id">编号: {{item.id}}</p>
                            <div class="like-button">
                                <button class="like-btn" @click="toggleLike(item)">
                                    <span class="icon">❤️</span>
                                    <span class="count">{{item.hot}}</span>
                                </button>
                            </div>
                        </div>
                    </div>


                    <!-- ... 其他8个作品 ... -->
                </div>

                <h2>数字创意作品集（新媒体）</h2>
                <div class="portfolio-container">
                    <!-- 第二个作品集的作品 -->
                    <!-- 重复以下结构9次 -->
                    <!-- 重复以下结构9次 -->
                    <div class="portfolio-item" v-for="(item,index) in newMedias" v-if="index<=8">
                        <img class="portfolio-image" :src="'http://localhost:8083/'+item.coverimg"  alt="作品1">
                        <div class="portfolio-details">
                            <p class="portfolio-name">{{item.name}}</p>
                            <p class="portfolio-id">编号: {{item.id}}</p>
                            <div class="like-button">
                                <button class="like-btn" @click="toggleLike(item)">
                                    <span class="icon">❤️</span>
                                    <span class="count">{{item.hot}}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- ... 其他8个作品 ... -->
                </div>
            </div>
        </div>


        <!-- 清除浮动，确保布局正常 -->
        <div style="clear: both;"></div>
        <!-- 底部版权区域 -->
        <div class="footer">
            <p>&copy; 2024 湖南网络工程职业学院信息工程学院。所有权利保留。</p>
        </div>
        <!-- 脚本部分（如果有的话） -->
        <!-- <script src="your-script.js"></script> -->
    </div>

</body>

</html>
<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                title: '欢迎来到数字文化服务平台',
                submenu: [{ id: 1, name: '数字创意作品集（文创）' }, { id: 2, name: '数字创意作品集（新媒体）' }],
                menus: [
                    { id: 1, name: '首页', submenu: [{ id: 1, name: '数字创意作品集（文创）' }, { id: 2, name: '数字创意作品集（新媒体）' }] },
                    { id: 2, name: '数字创意作品集（文创）', submenu: [{ id: 1, name: '数字创意作品集（文创）' }, { id: 2, name: '数字创意作品集（新媒体）' }] },
                    { id: 3, name: '数字创意作品集（新媒体）', submenu: [{ id: 1, name: '数字创意作品集（文创）' }, { id: 2, name: '数字创意作品集（新媒体）' }] },
                    {
                        id: 4, name: '“正美”设计工作室', submenu: [{ id: 1, name: '工作室职责' }, { id: 2, name: '工作室团队成员' }
                            , { id: 3, name: '工作室管理制度' }, { id: 4, name: '工作室成果' }]
                    },
                    {
                        id: 5, name: '数字文化服务中心', submenu: [{ id: 1, name: '数字文化服务中心职责' }, { id: 2, name: '数字文化服务中心团队成员' }
                            , { id: 3, name: '中心管理制度' }, { id: 4, name: '中心成果' }]
                    },
                    {
                        id: 6, name: '企业导师工作室', submenu: [{ id: 1, name: '导师工作室职责' }, { id: 2, name: '导师工作室成员' }
                            , { id: 3, name: '导师工作室管理制度' }, { id: 4, name: '导师工作室成果' }]
                    },
                    { id: 7, name: '咨询中心' }
                    // ...更多项目  
                ],
                culturalIndustries: [
                    { id: 1, name: "文创作品1", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 2, name: "文创作品2", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 3, name: "文创作品3", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 4, name: "文创作品4", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 5, name: "文创作品5", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 6, name: "文创作品6", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 7, name: "文创作品7", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 8, name: "文创作品8", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 9, name: "文创作品9", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 10, name: "文创作品10", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 11, name: "文创作品11", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 12, name: "文创作品12", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 13, name: "文创作品13", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 14, name: "文创作品14", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 15, name: "文创作品15", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 16, name: "文创作品16", hot: 100, contact: "正美文创", imgsrc: "images/demo1.jpg", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                ],
                newMedias: [
                    { id: 1, name: "新媒体作品5", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 2, name: "新媒体作品6", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 3, name: "新媒体作品7", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 4, name: "新媒体作品8", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 5, name: "新媒体作品9", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 6, name: "新媒体作品10", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 7, name: "新媒体作品11", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 8, name: "新媒体作品12", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 9, name: "新媒体作品13", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 10, name: "新媒体作品14", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 11, name: "新媒体作品15", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                    { id: 12, name: "新媒体作品16", hot: 100, contact: "正美文创", imgsrc: "images/demo2.png", message: [{ id: 1, message: "咨询信息1" }, { id: 2, message: "咨询信息2" }] },
                ],
                culturalIndustries2: []
            }
        },
        methods: {
            changemenu(index) {
                this.submenu = this.menus[index].submenu
            },
            toggleLike(item) {

                item.hot++

            },
            fecthnewMedias() {
                axios.post('http://localhost:8083/digiculture/getcategory/list', {
                    "category": "新媒体"
                })

                    .then(response => {
                        this.newMedias = response.data.data;
                        console.log(this.newMedias)
                    })
                    .catch(error => {
                        console.error('There was an error!', error);
                    });
            }
        },
        mounted() {
            this.fecthnewMedias();
        }

    });  
</script>